import React from 'react';
import './Fen.css';

const patients = [
  {
    id: 1,
    name: '肖蛋桑',
    age: '1岁11个月17天',
    gender: '男',
    note: '结直肠癌',
    date: '2020/05/07',
    type: 'urgent',
    status: 'active'
  },
  {
    id: 2,
    name: '李云婷',
    age: '27岁',
    gender: '女',
    note: '剖腹产住院',
    date: '2020/05/09',
    type: 'vip',
    status: 'waiting'
  },
];

const categories = [
  { name: '门诊', count: 12 },
  { name: '住院', count: 8 },
  { name: '儿科', count: 5 },
  { name: '未付费患者', count: 3 },
  { name: '未分组患者', count: 7 },
  { name: '未填资料患者', count: 4 },
];

function Fen() {
  return (
    <div className="appqw">
      <h1>分组管理</h1>
      <div className="patients">
        {patients.map((patient) => (
          <div key={patient.id} className="patient">
            <div className="avatar">
              <img 
                src={`https://xsgames.co/randomusers/avatar.php?g=${patient.gender === '男' ? 'male' : 'female'}`} 
                alt={patient.name} 
              />
            </div>
            <div className="info">
              <h2>
                <span className={`patient-status status-${patient.status}`}></span>
                {patient.name}
                <span className={`patient-type ${patient.type}`}>
                  {patient.type === 'vip' ? 'VIP' : '急诊'}
                </span>
              </h2>
              <p>{patient.gender} | {patient.age}</p>
              <p>诊断：{patient.note}</p>
              <p>入院时间：{patient.date}</p>
            </div>
          </div>
        ))}
      </div>
      
      <div className="categories">
        {categories.map((category) => (
          <div key={category.name} className="category">
            <span>{category.name}</span>
            <span>{category.count}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Fen;